"use client"

import Link from "next/link"
import { Button } from "@/components/ui/button"
import { useEffect } from "react"
import FuzzyText from "@/components/FuzzyText"

export function Hero() {
  useEffect(() => {
    // 初始化 Unicorn Studio
    if (typeof window !== "undefined" && !window.UnicornStudio) {
      window.UnicornStudio = { isInitialized: false }
      const script = document.createElement("script")
      script.src = "https://cdn.jsdelivr.net/gh/hiunicornstudio/unicornstudio.js@v1.4.34/dist/unicornStudio.umd.js"
      script.onload = function () {
        if (window.UnicornStudio && !window.UnicornStudio.isInitialized) {
          if (typeof UnicornStudio !== "undefined" && UnicornStudio.init) {
            UnicornStudio.init()
            window.UnicornStudio.isInitialized = true
          }
        }
      }
      document.head.appendChild(script)
    }
  }, [])
  
  return (
    <section className="relative min-h-screen flex items-center overflow-hidden">
      {/* Unicorn Studio 交互式背景 */}
      <div 
        data-us-project="Hdx02AOgNprtSlJESzBT" 
        className="absolute inset-0 -z-10 w-full h-full"
        style={{ width: '100%', height: '100%' }}
        id="unicorn-background"
      />
      
      {/* 内容区 */}
      <div className="container mx-auto px-4 sm:px-6 lg:px-8 w-full">
        <div className="max-w-4xl">
          <h1 className="font-bold tracking-tight leading-tight mb-8">
            {/* First line */}
            <div className="mb-2">
              <FuzzyText
                fontSize="clamp(4rem, 12vw, 12rem)"
                fontWeight={700}
                fontFamily="inherit"
                color="#ffffff"
                enableHover={true}
                baseIntensity={0.15}
                hoverIntensity={0.4}
              >
                智能分析，
              </FuzzyText>
            </div>
            {/* Second line */}
            <div>
              <FuzzyText
                fontSize="clamp(4rem, 12vw, 12rem)"
                fontWeight={700}
                fontFamily="inherit"
                color="#ffffff"
                enableHover={true}
                baseIntensity={0.15}
                hoverIntensity={0.4}
              >
                终得所愿。
              </FuzzyText>
            </div>
          </h1>
          <p className="text-lg sm:text-xl text-foreground/70 mb-12 max-w-2xl">
            让AI驱动您的业务增长，提供深度洞察和智能销售建议，助您在竞争激烈的市场中脱颖而出。
          </p>
          <Button size="lg" asChild className="text-base px-8 py-6">
            <Link href="/signup">立即试用</Link>
          </Button>
        </div>
      </div>
    </section>
  )
}

